$(function () {
  download();
  function download() {
    $.ajax({
      type: "get",
      url: "../assets/data/nav.json",//数据来源
      success: function (result) {
        var bannerArr = result.banner;//将数据中banner部分赋值给变量
        for (var i = 0; i < bannerArr.length; i++) {//通过循环创建图片和按钮
          $(`<a href="${bannerArr[i].url}"><img class="swiper-lazy swiper-lazy-loaded" src="../images/banner/${bannerArr[i].img}" alt=""></a>`).appendTo("#J_homeSwiper .swiper-slide");
          var node = $(`<a href="#" class = 'swiper-pagination-bullet'></a>`);
          if (i == 0) { node.addClass("swiper-pagination-bullet-active"); }
          node.appendTo("#J_homeSwiper .swiper-pagination");
        }

      },
      error: function (msg) {
        console.log(msg);
      }
    })
    leftNavDownload();
    topNavDownload();
    leftNavTab();
    topNavTab();

  }
})
  //暴露
  banner();
  
  searchTab();
  goodcarTab();
//轮播图切换
  function banner() {
    var iNow = 0;//当前图片和按钮的下标
    var aImgs = null;//记录图片
    var aBtns = null;//记录按钮
    var timer = setInterval(() => {//定时器
      iNow++;
      tab();
    }, 2500);
    function tab() {
      if (!aImgs) { aImgs = $("#J_homeSwiper .swiper-slide").find("a"); }//找到特定id和class下的a标签
      if (!aBtns) { aBtns = $("#J_homeSwiper .swiper-pagination").find("a"); }//找到特定id和class下的a标签
      if (iNow == 5) { iNow = 0; }//通下标循环对图片和按钮循环
      aImgs.hide().css("opacity", 0.2).eq(iNow).show().animate({ opacity: 1 }, 500);//去掉全部样式后通过iNow的值设置给特定图片和按钮样式并添加动画
      aBtns.removeClass("swiper-pagination-bullet-active").eq(iNow).addClass("swiper-pagination-bullet-active");//同上
    }
    $("#J_homeSwiper,.swiper-button-prev,.swiper-button-next").mouseenter(function () {
      clearInterval(timer);//对图片区域的左右控制按钮设施鼠标移入清除定时器，在鼠标移除后新建一个同名的且一模一样的定时器
    }).mouseleave(function () {
      timer = setInterval(() => {
        iNow++;
        tab();
      }, 2500);
    })
    $("#J_homeSwiper .swiper-pagination").on("click", "a", function () {
      iNow = $(this).index();//电机哪一个按钮this就是哪一个，即可得到当前的按钮的索引，通过改变索引并重新执行tab来控制图片和按钮的样式
      tab();
      return false;//阻止a链接的默认行为
    })
    $(".swiper-button-prev,.swiper-button-next").on("click", function () {//通过class找到左右控制按钮，并通过修改iNow的值重新运行tab来控制图 片和按钮
      if (this.className == "swiper-button-prev") {
        iNow--;
        if (iNow == -1) {
          iNow = 4;
        }
      } else {
        iNow++;
      }
      tab();
    })
  }
  //侧边导航数据下载渲染
  function leftNavDownload() {
    $.ajax({
      url: "./assets/data/nav.json",
      success: function (result) {
        var sideArr = result.sideNav;
        for (var i = 0; i < sideArr.length; i++) {
          var node = $(`<li class = 'category-item' >
                <a href="/list.html" class = 'title'>
                    ${sideArr[i].title}
                    <em class = 'iconfont-arrow-right-big'></em>
                </a>
                <div class="children clearfix">
                </div>
            </li>`);
          node.appendTo("#J_categoryList");
          var childArr = sideArr[i].child;
          var col = Math.ceil(childArr.length / 6);
          node.find("div.children").addClass("children-col-" + col);
          for (var j = 0; j < childArr.length; j++) {
            if (j % 6 == 0) {
              var newUl = $(`<ul class="children-list children-list-col children-list-col-1"></ul>`);
              newUl.appendTo(node.find("div.children"));
            }
            $(`<li>
                <a href="http://www.mi.com/redminote8pro" data-log_code="31pchomeother001000#t=normal&amp;act=other&amp;page=home&amp;page_id=10530&amp;bid=3476792.2" class="link clearfix" data-stat-id="d678e8386e9cb0fb" onclick="_msq.push(['trackEvent', '81190ccc4d52f577-d678e8386e9cb0fb', 'http://www.mi.com/redminote8pro', 'pcpid', '31pchomeother001000#t=normal&amp;act=other&amp;page=home&amp;page_id=10530&amp;bid=3476792.2']);">
                    <img src="${childArr[j].img}" width="40" height="40" alt="" class="thumb">
                    <span class="text">${childArr[j].title}</span>
                </a>
            </li>`).appendTo(newUl);
          }
        }

      }
    })
  }

  //顶部导航数据下载渲染
  function topNavDownload() {
    $.ajax({
      url: "./assets/data/nav.json",
      success: function (result) {
        var topNavArr = result.topNav;
        topNavArr.push({ title: "服务" }, { title: "社区" });
        for (var i = 0; i < topNavArr.length; i++) {
          $(`<li data-index="${i}" class="nav-item">
                <a href="javascript:void(0);" class="link"><span class="text">${topNavArr[i].title}</span></a>
            </li>`).appendTo(".site-header .header-nav .nav-list");
          $(`<ul class="children-list clearfix" style="display: ${i == 0 ? "block" : "none"};"></ul>`).appendTo("#J_navMenu .container");
          var topNavChildArr = topNavArr[i].childs;
          if (topNavChildArr) {
            for (var j = 0; j < topNavChildArr.length; j++) {
              $(`<li>
                        <a href="descxxx.html">
                        <div class="figure figure-thumb"><img src="${topNavChildArr[j].img}" alt=""></div>
                        <div class="title">${topNavChildArr[j].a}</div>
                        <p class="price">${topNavChildArr[j].i}</p>
                        </a>
                    </li>`).appendTo("#J_navMenu .container .children-list");
            }
          }
        }

      },
      error: function (msg) {
        console.log(msg);
      }
    })
  }
  //侧边导航切换
  function leftNavTab() {
    $("#J_categoryList").on("mouseenter", ".category-item", function () {
      $(this).addClass("category-item-active");
    })
    $("#J_categoryList").on("mouseleave", ".category-item", function () {
      $(this).removeClass("category-item-active");
      $(".site-category").css("style","display:block");
    })
  }
//顶部导航切换
  function topNavTab() {
    $(".header-nav .nav-list").on("mouseenter", ".nav-item", function () {
      $(this).addClass("nav-item-active");
      var index = $(this).index() - 1;
      if (index >= 0 && index <= 6) {
        $("#J_navMenu").css({ display: "block" }).removeClass("slide-up").addClass("slide-down");
        $("#J_navMenu .container").find("ul").eq(index).css("display", "block").siblings("ul").css("display", "none");
      }
    });
    $(".header-nav .nav-list").on("mouseleave", ".nav-item", function () {
      $(this).removeClass("nav-item-active");
    });
    $(".site-header").mouseleave(function () {
      $("#J_navMenu").css({ display: "block" }).removeClass("slide-down").addClass("slide-up");
    })
  }
  //模糊搜索
  function searchTab() {
    $("#search").focus(function () {
      $("#J_keywordList").removeClass("hide").addClass("show");
    }).blur(function () {
      $("#J_keywordList").removeClass("show").addClass("hide");
    })
  }
  //购物车显示
function goodcarTab() {
  var timer;
  $('#J_miniCartBtn').mouseenter(function () {
    $('#J_miniCartMenu .menu-content').css("display", "block");
    timer=setTimeout(()=>{
      $('#J_miniCartMenu .loading').addClass("hide");
      $('#J_miniCartMenu div:not(.loading)').removeClass("hide");
    },1000)
  }).mouseleave(function () {
    clearInterval(timer);
    $('#J_miniCartMenu .menu-content').css("display", "none");
  })  
  }


